<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/picture/logo.png" width="90" height="90">
    </div>
    <p class="login-explain">优自西方账号登录</p>
    <div class="wrap">
      <input class="username" type="text" v-model="userName" placeholder="用户名/手机号">
      <div class="wrap-password">
        <input class="password" :type="canSee ? 'text' : 'password'"  v-model="passWord" placeholder="密码">
        <img @click="seeStatus()" v-if="canSee" src="../assets/picture/see-yes.png" width="35" height="35">
        <img @click="seeStatus()" v-else src="../assets/picture/see-no.png" width="35" height="35">
      </div>
      <div class="wrap-code">
        <input class="code" type="text"  v-model="code" placeholder="验证码">
        <img :src="codeImg" width="59" height="28" @click="changeCode()">
      </div>
      <span class="sign-in" @click="login()">登录</span>
    </div>
    <a :href="url + '/init_register.htm'" class="register">注册账户</a>
    <a href="http://www.finewest.cn/forget.htm" class="forget-password">忘记密码</a>
    <p v-if="loginError" class="login-error">{{loginError}}</p>
  </div>
</template>

<script>
  import {setCookie} from '../common/cookie'

  export default{
    name: 'login',
    data () {
      return {
        userName: '',
        passWord: '',
        code: '',
        canSee: false,
        codeImg: 'http://www.finewest.cn/verify.htm',
        url: 'http://www.finewest.cn',
        loginError: ''
      }
    },
    methods: {
      seeStatus () {
        this.canSee = !this.canSee
      },
      changeCode () {
        var d = new Date()
        this.codeImg = 'http://www.finewest.cn/verify.htm?' + d
      },
      login () {
        this.$http({
          method: 'POST',
          url: this.url + '/shopping_login.htm',
          // body: 'username=' + this.userName + '&password=' + this.passWord + '&code=' + this.code,
          // params: {userName: this.userName, password: this.passWord, code: this.code},
          body: {username: this.userName, password: this.passWord, code: this.code},
          emulateJSON: true
        }).then(function () {
          this.loginGo()
        }, function () {
          this.loginGo()
        })
      },
      loginGo () {
        this.$http({
          method: 'post',
          url: this.url + '/m/logon.htm',
          params: {userName: this.userName, password: this.passWord, code: this.code},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          console.log(response)
          if (response.userName) {
            setCookie('USER_NAME', response.userName, 7)
            // this.$router.push({ path: '/' })
            // location.href = this.url + '/buyer/index.htm'
            // location.reload()
            this.$router.back()
          } else {
            var that = this
            that.loginError = response.msg
            var errorTimer
            errorTimer = setTimeout(function () {
              clearTimeout(errorTimer)
              that.loginError = ''
            }, 2000)
          }
        }, function (response) {
          console.log(response)
          console.log('获取数据失败')
        })
      }
    }
  }
</script>

<style scope lang="scss">
  body,html{
    min-height: 100%;
    height: 100%;
  }
  .login{
    .logo{
      display: table;
      padding-top: 21px;
      margin: 0 auto 21px;
      img{
        display: inherit;
      }
    }
    p{
      font-size: 21px;
      color: #555555;
      text-align: center;
      margin-bottom: 21px;
    }
    .wrap{
      width: 100%;
      input{
        height: 42px;
        border: 1px solid #bbbbbb;
        border-radius: 5px;
        display: block;
        width: calc(100% - 56px);
        margin: 15px 28px;
        text-indent: 36px;
        outline: none;
      }
      input.username{
        background: url('../assets/picture/username.png') 8px 50% no-repeat;
        background-size: 20px 20px;
      }
      .wrap-password{
        position: relative;
        input.password{
          background: url('../assets/picture/password.png') left 8px top 50% no-repeat;
          background-size: 20px 20px;
        }
        img{
          position: absolute;
          right: 29px;
          top: 4.5px;
        }
      }
      .wrap-code{
        position: relative;
        input.code{
          background: url('../assets/picture/verification-code.png') left 8px top 50% no-repeat;
          background-size: 20px 20px, 59px 28px;
        }
        img{
          position: absolute;
          right: 38px;
          top: 8px;
        }
      }

      span.sign-in{
        display: table;
        height: 44px;
        background: #e92d46;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
        line-height: 44px;
        width: calc(100% - 56px);
        border-radius: 5px;
        margin: 25px auto 17px;
      }
    }
    a.register, a.forget-password{
      font-size: 14px;
      color: #555555;
    }
    a.register{
      float: left;
      margin-left: 34px;
    }
    a.forget-password{
      float: right;
      margin-right: 34px;
    }
    p.login-error{

      padding: 10px 15px;
      position: fixed;
      top: 50%;
      left: 50%;
      color: #FFFFFF;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.5);
    }
  }
  input::-webkit-input-placeholder { /* WebKit browsers */
    color:#bbbbbb;
    font-size: 14px;
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#bbbbbb;
    font-size: 14px;
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#bbbbbb;
    font-size: 14px;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#bbbbbb;
    font-size: 14px;
  }
</style>
